<template>
  <a-form :model="searchObj" layout="inline">
    <a-form-item label="姓名" name="name">
      <a-input v-model:value="searchObj.name" />
    </a-form-item>
    <a-form-item>
      <a-button @click="search">搜索</a-button>
      <a-button @click="reset">重置</a-button>
    </a-form-item>
  </a-form>
  <a-button @click="handleCreate">新增学生</a-button>
  <a-table
    @change="onTableChange"
    :pagination="pagination"
    :columns="columns"
    :dataSource="data"
  >
    <template #bodyCell="{ text, record, index, column }">
      <div v-if="column.dataIndex === 'action'">
        <a-button type="primary" @click="() => handleEdit(record)"
          >编辑</a-button
        >
        <a-popconfirm
          title="您确认删除吗？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="() => deleteRecord(record)"
        >
          <a-button>删除</a-button>
        </a-popconfirm>
      </div>
    </template>
  </a-table>
  <AddEdit
    :editData="editData"
    :isOpen="isOpen"
    @cancel="handleCancel"
    @success="onSuccess"
  />
</template>

<script setup>
import { ref } from "vue";
import { deleteStudent, getStudent } from "../../service/student";
import { message } from "ant-design-vue";
import AddEdit from "./components/AddEdit.vue";

const pagination = ref({
  current: 1,
  total: 0,
  pageSize: 10,
});

const searchObj = ref({});
const isOpen = ref(false);
const editData = ref({});

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "学号",
    dataIndex: "number",
    key: "number",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "班级",
    dataIndex: "class",
    key: "class",
  },

  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
  },
];
const data = ref([]);
const getData = async () => {
  const res = await getStudent({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
    // name: searchObj.value.name,
    ...searchObj.value,
  });
  console.log(res);
  data.value = res.data.data.record;
  pagination.value.total = res.data.data.totalItems;
};
getData();

const onTableChange = (value) => {
  pagination.value.current = value.current;
  pagination.value.pageSize = value.pageSize;
  getData();
};

const search = () => {
  pagination.value.current = 1;
  getData();
};
const reset = () => {
  searchObj.value = {};
  pagination.value.current = 1;
  pagination.value.pageSize = 10;
  getData();
};
const deleteRecord = async (record) => {
  message.success("删除成功！");
  await deleteStudent(record.id);
  getData();
  message.success("删除成功！");
};

const onSuccess = () => {
  isOpen.value = false;
  reset();
};
// 1. 打开模态框 2. 重置editData的数据
const handleCreate = () => {
  isOpen.value = true;
  editData.value = {};
};

// 打开模态框  填充editData的数据
const handleEdit = (record) => {
  isOpen.value = true;
  editData.value = record;
};
const handleCancel = () => {
  isOpen.value = false;
};
</script>

<style></style>
